Applied jQuery: Develop and Design (Pamela Gallagher's Library) by Jay Blanchard

Author:Jay Blanchard
Language: eng
Format: epub
Publisher: Peachpit Press
Published: 2012-06-19T16:00:00+00:00

* * *

Note

The callback option for the query string is not the same as the callback for the getJSON request.

* * *

4. The JSONP has been returned from Twitter at this point. Set up a loop through the data contained in the function. Treat the data as members of an array called item:

$.each(data, function(i, item){

5. Contain the tweet in a name: value pair with the name of text. Assign this item to the variable tweetText:

var tweetText = item.text;

6. Use regular expressions to locate URLs, @ tags, and hash(#) tags in the tweet so that you can give each the proper treatment. Look for URL’s first:

tweetText = tweetText.replace

(/http:\/\/\S+/g, '<a href="$&"

target="_blank">$&</a>');

The regular expression /http:\/\/\S+/g matches text beginning with http:// and ending in a space, which would typically indicate a URL. The /g (global) says to match all URLs in the string contained in tweetText. The URLs are turned into links by replacing the URL with an anchor tag containing the URL as both the href and the text of the link. In JavaScript the $& property contains the last item matched by a regular expression. Because the URL was the last item matched, it can be replaced into an anchor tag by using the $& property.

7. Twitter prefixes user names with the @ symbol. So, search tweetText for words beginning with the @ symbol:

tweetText = tweetText.replace(/(@)(\w+)/g,

' $1<a href="http://twitter.com/$2"

target="_blank">$2</a>');

Here, the regular expression /(@)(\w+)/g indicates that all words beginning with the @ symbol are replaced by the appropriate anchor tag to open a browser window for users’ tweets. The $1 and $2 contain the information matched in each parenthesis, which is used to include those matches in the replacement text.

8. Turn your attention to the hash tags now and use a technique similar to the one you used for replacing the @ symbol:

tweetText = tweetText.replace(/(#)(\w+)/g,

' $1<a href="http://search.twitter.com/

search?q=%23$2" target="_blank">$2

</a>');

9. Once the tweetText has been completely manipulated to insert all of the anchor tags, place it into a div. Then append the new div to the existing div (id="tw") that was set up as part of the original content for the page:

$("#tw").append('<div class="tweet">

'+tweetText+'</div>');

10. Close out the jQuery function and HTML tags for the page:

});

});

});

</script>

</body>

</html>

Figure 4.13. The Twitter widget retrieves the last few posts that you made.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.